<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>折叠菜单</title>
    <style>
        body{
            background-color: #F3EFE0;
        }
        .bot{
            color: #918E84;
            font-family:Arial, Helvetica, sans-serif;
            font-size: 24px;
            position: relative;
            right: 200px;
            float: right;
        }
        a{
            text-decoration: none;
            color: #918E84;
            font-family: Arial, Helvetica, sans-serif;
        }
        ul{list-style:none;padding:0;margin:0}
        #fold{width:150px;border:1px solid #515E7B;margin:10px;}
        div li{background:#515E7B;border-bottom:1px solid #fff;}
        div li a{text-decoration:none;color:#fff;font-size:16px;height:40px;line-height:40px;padding-left:10px;}
        div li a:hover{text-decoration:underline;}
        .wrap {width:150px;display:none;}
        .wrap li{background: #fff;margin: 0;}
        .wrap li a{color:#3B475F;font-size:12px;}
    </style>
</head>
<body>
    <script src="jquery-1.12.4.min.js"></script>
    <div id="fold"><ul>
        <li><a href="#">信息管理</a><ul class="wrap">
            <li><a href="#">未读信息</a></li>
            <li><a href="#">已读信息</a></li>
            <li><a href="#">信息列表</a></li>
        </ul></li>
        <li><a href="#">商品管理</a><ul class="wrap">
            <li><a href="#">商品添加</a></li>
            <li><a href="#">商品列表</a></li>
            <li><a href="#">商品分类</a></li>
        </ul></li>
        <li><a href="#">用户管理</a><ul class="wrap">
            <li><a href="#">权限设置</a></li>
            <li><a href="#">用户列表</a></li>
            <li><a href="#">重置密码</a></li>
        </ul></li>
    </ul>
    </div>
    <div class="bot">
        <a href="../章节目录/第十一章.html">返回</a>
        <br><br><br><br>
        <h3>Please appreciate((●'◡'●))......</h3>
    </div>
    <script>
        $('#fold>ul>li:first').find('.wrap').css({display:'block'});
        $('#fold>ul>li').click(function(){
            $(this).siblings('li').find('.wrap').css({display:'none'});
            $(this).find('.wrap').css({display:'block'});
        })
    </script>
</body>
</html>